interface Props {
	routeItem?: { title: string; [key: string]: any };
	children: React.ReactNode;
	className?: string;
}

import { Breadcrumb } from "antd";
import styles from "./index.module.less";
import { useLocation } from "react-router-dom";
import { useMemo } from "react";
import cs from "classnames";
import useUrl from "@/hooks/useUrl";

export default (props: Props) => {
	const { routeItem, className } = props;
	const { pathname, search } = useLocation();
	const { query } = useUrl();
	const PATH = "/transaction/detail";
	const isActive = pathname === PATH;

	const id = query.get("order_id");

	const items = useMemo(() => {
		const init = [
			{
				title: "订单管理",
				href: "/transaction"
			},
			{
				title: id,
				href: isActive ? undefined : `${PATH}${search}`,
				className: isActive ? styles.active : ""
			}
		];
		if (routeItem) {
			init.push(routeItem);
		}

		return init;
	}, [routeItem]);

	return (
		<div className={cs([styles.container, className])}>
			<Breadcrumb className={styles.breadcrumb} separator=">" items={items} />
			{props.children}
		</div>
	);
};
